<template>
  <div>
    <div class="head-container" style="height: calc(100vh - 200px)">
      <el-scrollbar>
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
        />
        <div class="dan" v-for="i in 77" :key="i">
          <div class="pian">
            <img
              src="../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg"
              width="70px"
              height="70px"
            />
          </div>
          <div @click="info" class="info">
            <div class="text-1">
              <b><big>山西小米</big></b>
            </div>
            <div class="text-2"><small>吃的小米，真空包装</small></div>
            <div class="text-3">
              <div>￥179</div>
              <div>
                <el-button type="success" icon="el-icon-shopping-cart-2" size="mini" circle></el-button>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "FenView2",
  data() {
    return {};
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
    info() {
      this.$router.push("/info");
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
.dan {
  border-bottom: 1px solid #666;
  display: flex;
}
.text {
  display: flex;
}
.text-1 {
  margin-left: 20px;
}
.text-2 {
  margin-left: 20px;
}
.text-3 {
  display: flex;
  margin-left: 20px;
  justify-content: space-between;
  align-items: center;
}
body .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-scrollbar {
  height: 100%;
}
.el-scrollbar__wrap {
  overflow: scroll;
  width: 110%;
  height: 120%;
}
.pian{
  width: 20%;
}
.info{
  width: 75%;
}
</style>
